/* components */
import {
  BaseSelectUserFilterFormTextField,
  BaseSelectUserFilterFormStateField,
  BaseSelectUserFilterFormSelectField,
  useBaseSelectUserFilterFields,
  QualificationManagementField
} from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { useBaseSelectUserOptions } from '@src/component/common/BaseSelectUser/hooks'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, PropType, Ref, ref } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* types */
import { BaseSelectUserFilterServiceProviderForm } from '@src/component/common/BaseSelectUser/types'

export type FilterDepartmentProps = {
  value: BaseSelectUserFilterServiceProviderForm;
}

export interface FilterDepartmentSetupState {
  
}

export enum FilterServiceProviderEmitEventNameEnum {
  Input = 'input',
  Enter = 'enter',
}

export type FilterDepartmentInstance = ComponentInstance & FilterDepartmentSetupState
export type FilterDepartmentVM = ComponentRenderProxy<FilterDepartmentProps> & CommonComponentInstance & FilterDepartmentInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserFilterDepartment,
  emits: [
    FilterServiceProviderEmitEventNameEnum.Input,
    FilterServiceProviderEmitEventNameEnum.Enter,
  ],
  props: {
    value: {
      type: Object as PropType<BaseSelectUserFilterServiceProviderForm>,
      default: () => ({}),
    }
  },
  setup(props: FilterDepartmentProps, { emit }) {
    
    const {
      stateField,
      stateOptions,
      serviceProviderTypeField,
      serviceProviderQualificationField,
      serviceProviderNameField,
      serviceProviderTypeOptions,
      serviceProviderQualificationOptions
    } = useBaseSelectUserFilterFields()
    
    const { isShowUser } = useBaseSelectUserOptions()
    
    const onChangeQualificationHandler = (value: string[]) => {
      
      const form: BaseSelectUserFilterServiceProviderForm = {
        ...props.value,
        spList: value
      }
      
      emit(FilterServiceProviderEmitEventNameEnum.Input, form)
      
    }
    
    const onChangeTypeHandler = (value: string[]) => {
      
      const form: BaseSelectUserFilterServiceProviderForm = {
        ...props.value,
        spTypeList: value
      }
      
      emit(FilterServiceProviderEmitEventNameEnum.Input, form)
      
    }
    
    const onChangeStateHandler = (value: string[]) => {
      
      const form: BaseSelectUserFilterServiceProviderForm = {
        ...props.value,
        stateList: value
      }
      
      emit(FilterServiceProviderEmitEventNameEnum.Input, form)
      
    }
    
    const onChangeSpNameHandler = (value: string) => {
      
      const form: BaseSelectUserFilterServiceProviderForm = {
        ...props.value,
        spName: value
      }
      
      emit(FilterServiceProviderEmitEventNameEnum.Input, form)
      
    }

    const onChangeQualificationManagement = (value: string[]) => {
      
      const form: BaseSelectUserFilterRoleForm = {
        ...props.value,
        qualificationManagement: value
      }
      
      emit(FilterServiceProviderEmitEventNameEnum.Input, form)
      
    }
    
    const onEnterChangeSpNameHandler = () => {
      emit(FilterServiceProviderEmitEventNameEnum.Enter)
    }
    
    return {
      isShowUser,
      stateField,
      stateOptions,
      serviceProviderTypeField,
      serviceProviderQualificationField,
      serviceProviderNameField,
      serviceProviderTypeOptions,
      serviceProviderQualificationOptions,
      onChangeQualificationHandler,
      onChangeTypeHandler,
      onChangeStateHandler,
      onChangeSpNameHandler,
      onEnterChangeSpNameHandler,
      onChangeQualificationManagement
    }
    
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserFilterDepartment}>
        <BaseSelectUserFilterFormTextField 
          field={this.serviceProviderNameField}
          value={this.value.spName}
          onInput={this.onChangeSpNameHandler}
          onEnter={this.onEnterChangeSpNameHandler}
        >
        </BaseSelectUserFilterFormTextField>
        
        <BaseSelectUserFilterFormSelectField 
          field={this.serviceProviderQualificationField}
          options={this.serviceProviderQualificationOptions}
          value={this.value.spList}
          onInput={this.onChangeQualificationHandler}
        >
        </BaseSelectUserFilterFormSelectField>
        
        <BaseSelectUserFilterFormSelectField 
          field={this.serviceProviderTypeField}
          options={this.serviceProviderTypeOptions}
          value={this.value.spTypeList}
          onInput={this.onChangeTypeHandler}
        >
        </BaseSelectUserFilterFormSelectField>
        
        <BaseSelectUserFilterFormStateField 
          v-show={this.isShowUser}
          field={this.stateField}
          options={this.stateOptions}
          value={this.value.stateList}
          onInput={this.onChangeStateHandler}
        >
        </BaseSelectUserFilterFormStateField>

        <QualificationManagementField v-show={this.isShowUser} value={this.value.qualificationManagement} onInput={this.onChangeQualificationManagement}/>
        
      </div>
    )
  }
})
